<template>
  <div class="Caipu">
    <div class="header">
      <van-search
        v-model="value"
        @click="search"
        placeholder="请输入搜索关键词"
      />
    </div>
    <div class="text">推荐菜谱：</div>
    <div class="caipu-box" v-for="(item , index) in this.videodata" :key="index" >
    <div  @click="godetail(item.r.id)" class="caipu-name" >{{item.r.n}}</div>
     <video :poster="item.r.img" :src="item.r.vu" loop="loop" muted="muted" controls="controls" width="100%" height="270px" x5-video-player-fullscreen="true"></video>
    </div>

    <div class="text">分类菜谱：</div>
    <div class="menu-box">
      <div>
        <van-sidebar v-model="activeKey" @change="onChange" >
          <van-sidebar-item
            :title="item.name"
            v-for="(item, index) in sidenavdata"
            :key="index"
          />
        </van-sidebar>
      </div>
      <div class="menu-content">
        <div
          v-for="(item, index) in this.elements"
          :key="index"
          class="menu-text"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Caipu",
  data() {
    return {
      value: "",
      active: 2,
      activeKey: 0,
      sidenavdata: [],
      element: [],
      elements: [],
      videodata: [],
    };
  },
  created() {
    this.getlatcatalogs();
    this.getvideodata();
  },
  methods: {
  
    onChange() {
      console.log("this.activeKey==>", this.activeKey);
      this.getlatcatalogs(this.activeKey);
      //  this.elements.name.addEventListener("animationstart",AnimationListener,false);
    },
    search() {
      this.$router.push({ name: "Search" });
    },
    // 请求菜谱
    getlatcatalogs() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/douguo/recipe/flatcatalogs",
      })
        .then((res) => {
          this.sidenavdata = res.data.result.cs;
          for (let index = 0; index < this.sidenavdata.length; index++) {
            // console.log('index==>',this.sidenavdata[index]);
            for (
              let i = 0;
              i < this.sidenavdata[this.activeKey].cs.length;
              i++
            ) {}
            // let element = this.sidenavdata[this.activeKey].cs;
            //   console.log('element==>',element);
          }
          let element = this.sidenavdata[this.activeKey].cs;
          this.elements = element;
          // console.log("this.elements==>", this.elements);
          // console.log('  this.twomenu==>',  this.twomenu);

          // console.log("res==>", res);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    // 请求视频
    getvideodata() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/douguo/home/videos/0/20",
      })
        .then((res) => {
          this.videodata = res.data.result.list;
          // console.log("this.videodata==>", this.videodata);
          console.log("res==>", res);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.Caipu {
  margin: 20px 5px 0;
}

/deep/.van-tabs__content {
  width: 100%;
}
.header {
  height: 20%;
}
.menu-box {
  height: 80%;
  display: flex;
}
.menu-content {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  height: 660px;

  .menu-text {
    width: 40%;
    height: 100px;
    background-color: rgb(206, 224, 121);
    line-height: 100px;
    text-align: center;
    font-size: 20px;
    border-radius: 20px;
    font-weight: bold;
    margin: 0 15px;
  }
  .tjcontnent{
    width: 100%;
    height: 300px;
  }
 
} 
.caipu-box{
  width: 100%;
  height: 300px;
  background-color: #ddd;
}
 .caipu-name{
   font-size: 16px;
   margin-left: 10px;
   color: rgb(112, 122, 16);
  } 
</style>